<!--
* @description 行车记录
* @author zywu
* @date 2021/07/26 11:16:00
!-->
<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
        <el-form-item>
          <el-select filterable @change="search" v-model="searchForm.payed" placeholder="是否支付" style="width:130px;">
            <el-option label="未支付" :value="0"></el-option>
            <el-option label="已支付" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select filterable @change="search" v-model="searchForm.status" placeholder="通行状态" style="width:130px;">
            <el-option label="入场" :value="1"></el-option>
            <el-option label="出场" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.intime"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="入场开始时间"
            end-placeholder="入场结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="utils.intTimePickerOptions()"
            @change="search"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.outtime"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="出场开始时间"
            end-placeholder="出场结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="utils.intTimePickerOptions()"
            @change="search"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="车场ID" v-model="searchForm.parkid" @keyup.enter.native="search" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="车牌号" v-model="searchForm.carNumber" @keyup.enter.native="search" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div>
      <el-table v-loading="loading" ref="elTable" :data="tableData" style="width: 100%">
        <el-table-column label="车场ID" prop="parkid"></el-table-column>
        <el-table-column label="车牌号" prop="carNumber"></el-table-column>
        <el-table-column label="车辆类型" prop>
          <template v-slot="sc">{{sc.row.carType==0?'小车':'大车'}}</template>
        </el-table-column>
        <el-table-column label="车牌类型" prop="cardType" :formatter="formatCardType"></el-table-column>
        <el-table-column label="通行状态" prop="status">
          <template v-slot="sc">{{sc.row.status==1?'入场':'出场'}}</template>
        </el-table-column>
        <el-table-column label="入场时间" prop="inTime" width="180"></el-table-column>
        <el-table-column label="出场时间" prop="outTime" width="180"></el-table-column>
        <el-table-column label="应收金额" prop="payCharge"></el-table-column>
        <el-table-column label="是否支付" prop="payed">
          <template v-slot="sc">{{sc.row.payed==1?'已支付':'未支付'}}</template>
        </el-table-column>
        <el-table-column label="实收金额" prop="realCharge"></el-table-column>
        <el-table-column label="支付方式" prop="payType"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="sc">
            <el-tabs type="border-card" v-model="tabName[sc.row.id]">
              <el-tab-pane name="1">
                <span slot="label">入场信息</span>
                <p>入场通道ID：{{sc.row.gateInId}}</p>
                <p>入场通道名称：{{sc.row.gateInName}}</p>
                <p>入场操作员：{{sc.row.operatorIn}}</p>
                <p>入场时间：{{sc.row.inTime}}</p>
              </el-tab-pane>
              <el-tab-pane name="2">
                <span slot="label">出场信息</span>
                <p>出场通道ID：{{sc.row.gateOutId}}</p>
                <p>出场通道名称：{{sc.row.gateOutName}}</p>
                <p>出场操作员：{{sc.row.operatorOut}}</p>
                <p>出场时间：{{sc.row.outTime}}</p>
              </el-tab-pane>
              <el-tab-pane name="3">
                <span slot="label">优惠信息</span>
                <p>免费金额：{{sc.row.breaksAmount}}</p>
                <p>免费原因：{{sc.row.breaksReason}}</p>
                <p>优惠金额：{{sc.row.promotionMoney}}</p>
                <p>优惠原因：{{sc.row.promotionReason}}</p>
                <p>优惠券金额：{{sc.row.discountAmount}}</p>
                <p>优惠券编号：{{sc.row.discountNo}}</p>
                <p>优惠商家名称：{{sc.row.discountShop}}</p>
              </el-tab-pane>
              <el-tab-pane name="4">
                <span slot="label">图片</span>
                <p>入场图片</p>
                <div v-if="sc.row.imageInList">
                  <img
                    v-for="(o,i) in sc.row.imageInList"
                    :key="i"
                    :src="o"
                    width="50px"
                    height="50px"
                    @click="$imgViewer"
                    :data-imgpreview="sc.row.imageInList.join(',')"
                    :data-imgpreviewindex="i"
                    style="margin:10px 10px 0 0"
                  />
                </div>
                <div v-else>暂无图片</div>
                <p style="margin-top:20px;">出场图片</p>
                <div v-if="sc.row.imageOutList">
                  <img
                    v-for="(o,i) in sc.row.imageOutList"
                    :key="i"
                    :src="o"
                    width="50px"
                    height="50px"
                    @click="$imgViewer"
                    :data-imgpreview="sc.row.imageOutList.join(',')"
                    :data-imgpreviewindex="i"
                    style="margin:10px 10px 0 0"
                  />
                </div>
                <div v-else>暂无图片</div>
                <p style="margin-top:20px;">其它图片</p>
                <div v-if="sc.row.imageOtherList">
                  <img
                    v-for="(o,i) in sc.row.imageOtherList"
                    :key="i"
                    :src="o"
                    width="50px"
                    height="50px"
                    @click="$imgViewer"
                    :data-imgpreview="sc.row.imageOtherList.join(',')"
                    :data-imgpreviewindex="i"
                    style="margin:10px 10px 0 0"
                  />
                </div>
                <div v-else>暂无图片</div>
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import utils from '@/utils/util'
import { getOrgList } from '@/api/org'
import { getDictByCode } from '@/api/dic'
import { getParkingPassRecordList } from '@/api/communicat'

export default {
  name: 'SmsRecord',
  data() {
    return {
      loading: true,
      utils: utils,
      orgList: [],
      searchForm: {
        parkid: '',
        status: '',
        payed: '',
        carNumber: '',
        intime: '',
        outtime: '',
      },
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tabName:{},
    }
  },
  created() {
    this.search()
  },
  methods: {
    // 展开详情
    handleDetail(row) {
      this.tabName[row.id]='1'
      this.$refs.elTable.toggleRowExpansion(row)
    },
    formatCardType(row, col, val) {
      return {
        0: '临时车',
        1: '月租车',
        2: '充值车',
        3: '贵宾车',
        4: '免费车',
        8: '收费月租车',
      }[val]
    },
    // 获取列表数据
    getTableData(pageIndex, pageSize) {
      let that = this
      that.loading = true
      if (pageIndex) {
        that.currentPage = pageIndex
      }
      if (pageSize) {
        that.pageSize = pageSize
      }
      getParkingPassRecordList({
        status: this.searchForm.status,
        payed: this.searchForm.payed,
        parkid: this.searchForm.parkid,
        carNumber: that.searchForm.carNumber,
        inTimeStart:
          that.searchForm.intime && that.searchForm.intime.length > 0
            ? that.searchForm.intime[0]
            : '',
        inTimeEnd:
          that.searchForm.intime && that.searchForm.intime.length > 0
            ? that.searchForm.intime[1]
            : '',
        outTimeStart:
          that.searchForm.outtime && that.searchForm.outtime.length > 0
            ? that.searchForm.outtime[0]
            : '',
        outTimeEnd:
          that.searchForm.outtime && that.searchForm.outtime.length > 0
            ? that.searchForm.outtime[1]
            : '',
        pageIndex: that.currentPage,
        pageSize: that.pageSize,
        queryType: 1,
      }).then((res) => {
        if (res.status === 200) {
          that.tableData = res.data
          that.total = res.total
        }
        that.loading = false
      })
    },
    handleSizeChange(pageSize) {
      this.getTableData(1, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.getTableData(currentPage)
    },
    search() {
      this.getTableData(1)
    },
  },
}
</script>
